<template>
	<view class="flash-sale-banner" v-if="activity">
		<view class="banner-content">
			<view class="header-section" @tap="toFlashSale">
				<view class="title-area">
					<cl-icon name="fire" size="24" color="#ff4757"></cl-icon>
					<text class="title">限时抢购</text>
				</view>
				<view class="countdown-area">
					<text class="countdown-label">距结束</text>
					<view class="countdown-time">
						<text class="time-unit">{{ hours }}</text>
						<text class="separator">:</text>
						<text class="time-unit">{{ minutes }}</text>
						<text class="separator">:</text>
						<text class="time-unit">{{ seconds }}</text>
					</view>
					<cl-icon name="arrow-right" size="18" color="#ffffff" :margin="[0, 0, 0, 8]"></cl-icon>
				</view>
			</view>
			<scroll-view class="products-scroll" scroll-x :show-scrollbar="false">
				<view class="products-preview">
					<view
						class="product-item"
						v-for="(product, index) in previewProducts"
						:key="product.id"
						@tap.stop="toProductDetail(product)"
					>
						<view class="discount-badge">
							<text class="discount-text">{{ product.discount }}折</text>
						</view>
						<image
							:src="product.image || '/static/empty/no.jpg'"
							class="product-image"
							mode="aspectFill"
						/>
						<view class="product-info">
							<text class="product-name">{{ product.name }}</text>
							<text class="product-spec">{{ product.spec }}</text>
							<view class="price-info">
								<text class="sale-price">¥{{ product.salePrice }}</text>
								<text class="original-price">¥{{ product.originalPrice }}</text>
							</view>
							<view class="stock-bar">
								<view class="stock-progress" :style="{ width: product.stockPercent + '%' }"></view>
								<text class="stock-text">仅剩{{ product.stock }}件</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import { useCool } from "/@/cool";

defineProps<{
	activity: any;
}>();

const { router } = useCool();

const currentTime = ref(new Date().getTime());
let timer: NodeJS.Timeout;

// 模拟预览商品
const previewProducts = computed(() => [
	{
		id: 1,
		image: "/static/empty/no.jpg",
		name: "阿莫西林胶囊",
		spec: "0.5g*24粒/盒",
		salePrice: "99",
		originalPrice: "199",
		discount: "5.0",
		stock: 28,
		stockPercent: 30
	},
	{
		id: 2,
		image: "/static/empty/no.jpg",
		name: "999感冒灵颗粒",
		spec: "10g*9袋/盒",
		salePrice: "149",
		originalPrice: "299",
		discount: "5.0",
		stock: 15,
		stockPercent: 20
	},
	{
		id: 3,
		image: "/static/empty/no.jpg",
		name: "布洛芬缓释胶囊",
		spec: "0.3g*20粒/盒",
		salePrice: "79",
		originalPrice: "159",
		discount: "5.0",
		stock: 45,
		stockPercent: 60
	},
	{
		id: 4,
		image: "/static/empty/no.jpg",
		name: "维生素C片",
		spec: "100mg*100片/瓶",
		salePrice: "39",
		originalPrice: "89",
		discount: "4.4",
		stock: 12,
		stockPercent: 15
	}
]);

// 计算倒计时
const hours = computed(() => {
	const diff = Math.max(0, (new Date().getTime() + 2 * 60 * 60 * 1000) - currentTime.value);
	return String(Math.floor(diff / (1000 * 60 * 60))).padStart(2, "0");
});

const minutes = computed(() => {
	const diff = Math.max(0, (new Date().getTime() + 2 * 60 * 60 * 1000) - currentTime.value);
	return String(Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, "0");
});

const seconds = computed(() => {
	const diff = Math.max(0, (new Date().getTime() + 2 * 60 * 60 * 1000) - currentTime.value);
	return String(Math.floor((diff % (1000 * 60)) / 1000)).padStart(2, "0");
});

function toFlashSale() {
	router.push("/pages/market/flash-sale");
}

function toProductDetail(product: any) {
	router.push(`/pages/goods/detail?id=${product.id}`);
}

onMounted(() => {
	timer = setInterval(() => {
		currentTime.value = new Date().getTime();
	}, 1000);
});

onUnmounted(() => {
	if (timer) {
		clearInterval(timer);
	}
});
</script>

<style lang="scss" scoped>
.flash-sale-banner {
	margin: 0 16rpx;
	border-radius: 16rpx;
	overflow: hidden;
	background: linear-gradient(135deg, #ff4757 0%, #ff6b7a 100%);
	box-shadow: 0 4rpx 12rpx rgba(255, 71, 87, 0.2);
}

.banner-content {
	padding: 24rpx 0;
	color: #ffffff;
}

.header-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24rpx;
	padding: 0 24rpx;
	cursor: pointer;
}

.title-area {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.title {
	font-size: 34rpx;
	font-weight: 700;
	letter-spacing: 1rpx;
}

.countdown-area {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.countdown-label {
	font-size: 24rpx;
	opacity: 0.85;
}

.countdown-time {
	display: flex;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.15);
	border-radius: 24rpx;
	padding: 6rpx 16rpx;
	backdrop-filter: blur(10rpx);
}

.time-unit {
	font-size: 26rpx;
	font-weight: 700;
	min-width: 36rpx;
	text-align: center;
}

.separator {
	font-size: 26rpx;
	margin: 0 4rpx;
	opacity: 0.8;
}

.products-scroll {
	width: 100%;
}

.products-preview {
	display: flex;
	gap: 20rpx;
	padding: 0 24rpx;
}

.product-item {
	position: relative;
	flex-shrink: 0;
	width: 280rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	overflow: hidden;
	transition: all 0.3s ease;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);

	&:active {
		transform: scale(0.98);
	}
}

.discount-badge {
	position: absolute;
	top: 12rpx;
	right: 12rpx;
	background: linear-gradient(135deg, #ff4757 0%, #ff6b7a 100%);
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
	z-index: 10;
}

.discount-text {
	font-size: 22rpx;
	color: #ffffff;
	font-weight: 600;
}

.product-image {
	width: 100%;
	height: 280rpx;
	background-color: #f8f8f8;
}

.product-info {
	padding: 16rpx;
	background-color: #ffffff;
}

.product-name {
	display: block;
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	line-height: 1.4;
	margin-bottom: 8rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.product-spec {
	display: block;
	font-size: 22rpx;
	color: #999;
	margin-bottom: 12rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.price-info {
	display: flex;
	align-items: baseline;
	gap: 12rpx;
	margin-bottom: 12rpx;
}

.sale-price {
	font-size: 32rpx;
	font-weight: 700;
	color: #ff4757;
}

.original-price {
	font-size: 24rpx;
	color: #999;
	text-decoration: line-through;
}

.stock-bar {
	position: relative;
	height: 32rpx;
	background-color: #ffe4e6;
	border-radius: 16rpx;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.stock-progress {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: linear-gradient(90deg, #ff4757 0%, #ff6b7a 100%);
	border-radius: 16rpx;
	transition: width 0.3s ease;
}

.stock-text {
	position: relative;
	font-size: 20rpx;
	color: #ff4757;
	font-weight: 500;
	z-index: 1;
}
</style> 
